<template>
	<view>
		<u-popup :show="showAgree" mode="bottom" round="10">
			<view class="Cotent">
				<view class="rows">
					<u-tabs :list="dataList" @click="click" :activeStyle="activeStyle" :current="current"
						lineColor="#ff6501">
					</u-tabs>
				</view>

				<view class="content">
					<view class="rows" v-for="(item,index) in dataList" :key="index">
						<u-parse :content="item.website_article_content" :domain="imgUrl"
							v-if="index== current"></u-parse>
					</view>

				</view>
				<view class="bots">
					<view class="list Turndown" @click="ControlsBtn">拒绝</view>
					<view class="list agree" @click="ControlsBtn">同意</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import { inject, onBeforeMount, ref } from 'vue';
	import Http from '@/common/request.js';
	import { usePiniaStore } from '@/store/pinia.js';


	const Pinia = usePiniaStore();
	const { imgUrl } = inject('config');
	const dataList = ref([{
		id: 32729
	}, {
		id: 32731
	}, {
		id: 32730
	}]);
	const current = ref(0);
	const showAgree = ref(false);
	const activeStyle = ref({
		color: '#ff6501',
		fontSize: '32rpx'
	})
	const inactiveStyle = ref({
		fontSize: '32rpx'
	})


	onBeforeMount(() => {
		articleInfo();
	})

	const articleInfo = () => {
		dataList.value.forEach(item => {
			Http.post({
				url: '/zzjApp/articleInfo',
				data: {
					website_article_id: item.id
				}
			}).then(res => {
				if (res.errcode != '00000') return;
				const result = res.data;
				item.name = result.website_article_title;
				item.website_article_content = result.website_article_content;
			})
		})
		setTimeout(() => {
			if (Pinia.vid) {
				uni.showTabBar();
				showAgree.value = false;
			} else {
				uni.hideTabBar();
				showAgree.value = true;
			}
		}, 500)
	}


	const click = (target) => {
		current.value = target.index;
	}

	const ControlsBtn = () => {
		showAgree.value = false;
		uni.showTabBar();
	}
</script>

<style lang="scss" scoped>
	.Cotent {
		width: 100%;
		padding: 30rpx;
		height: 1000rpx;
		display: flex;
		flex-direction: column;
	}

	.content {
		flex: 1;
		margin: 20rpx 0;
		overflow-y: scroll;
	}

	.bots {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.list {
		width: 240rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		font-size: 30rpx;
		border-radius: 20rpx;
		position: relative;
	}

	.Turndown {
		color: #ccc;
	}

	.agree {
		color: $themeColor;
	}

	.Turndown::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid #cccccc;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		width: 200%;
		height: 200%;
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
		transform-origin: left top;
		-webkit-transform-origin: left top;
		border-radius: 20rpx;
	}

	.agree::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid $themeColor;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		width: 200%;
		height: 200%;
		transform: scale(0.5);
		-webkit-transform: scale(0.5);
		transform-origin: left top;
		-webkit-transform-origin: left top;
		border-radius: 20rpx;
	}
</style>